<!-- 首页-组件模板 -->
<template>
	<view class="homeDoms">
		<map 
			id="map" 
			:show-location="true"
			:longitude="longitude" 
			:latitude="latitude" 
			scale="14" 
			:markers="markers"
			@markertap="handleMarkerTap" 
			style="width: 100%; height: 100%;"
		></map>
		
		<!-- 授权信息-提示窗示例 -->
		<view @touchmove.stop.prevent="">
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content">
					<view class="fontWeight fontSize18 marginBottom20">{{ currMarker.name }}</view>
					<view class="text marginBottom20">地址：{{ currMarker.address }}</view>
					<view class="text">距离：{{ currMarker.distance }}米</view>
				</view>
			</uni-popup>
		</view>
		
	</view>
</template>

<!-- 组件核心js -->
<script>
	export default {
		data() {
			return {
				longitude: 116.397470,
				latitude: 39.908821,
				markers: [],
				markersInfo: [],
				currMarker: {}, // 当前选中的Marker点
				list: [
					{id:1, name: '中式按摩', desc: "缓解疲劳 改善睡眠", price: 218, time: '60分钟', serversNums: 1262},
					{id:2, name: '通络培元', desc: "缓解疲劳 疏通经络", price: 298, time: '80分钟', serversNums: 3153},
					{id:3, name: '泰式SPA', desc: "消除疲劳 提高免疫", price: 398, time: '120分钟', serversNums: 5270},
					{id:4, name: '法式SPA', desc: "疏通经络 放松身心", price: 498, time: '120分钟', serversNums: 170}
				]
			};
		},
		onLoad() {
			// 初始化-函数
			this.getCurrentLocation();
		},
		methods: {
			
			handleMarkerTap(e) {
				let target = this.markersInfo.filter(item => item.id == e.markerId);
				// console.log('您点击Markers', e);
				// 如果Marker点存在
				if(target) {
					this.currMarker = target[0];
					// console.log('您点击currMarker=', target[0]);
					// 加载完成后-执行
					this.$nextTick(() => {
						// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
						this.$refs.popup.open("bottom");
					})
				}
			},
			
			/**
			 * 获取当前位置-函数
			 * */
			getCurrentLocation() {
				let _this = this;
				uni.getLocation({
					// type: 'wgs84',
					// type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: async function (res) {
						// console.log("获取定位坐标：", res);
						_this.longitude = res.longitude;
						_this.latitude = res.latitude;
						// 赋值
						/* _this.markers = [
							{
								id: 'M_'+ Math.random(),
								latitude: res.latitude, // 标记的纬度
								longitude: res.longitude, // 标记的经度
								title: '约个摩', // 标记的标题
								label: {
									content: '约个摩'
								}
							}
						]; */
						// 周边搜索
						_this.searchNearby("足浴", res.latitude, res.longitude);
					},
					fail(res) {
						// 提示信息
						console.log('对不起，获取位置失败~');
					}
				});
			},
				
			/**
			 * 根据关键字和坐标，搜索附近-函数
			 * */
			searchNearby(keyword, latitude, longitude) {
			    const apiKey = '1afe491f83693172eb9c5239e4c89513'; // 替换为你的API Key  34a70975acb1d70675a419a027d5a410
			    const url = `https://restapi.amap.com/v3/place/around?key=${apiKey}&keywords=${keyword}&location=${latitude},${longitude}&types=&radius=1000&extensions=base`; // 附近搜索URL，可根据需要调整参数
			    // console.log(url);
				uni.request({
			      url: url,
			      success: (res) => {
			        if (res.data.status == '1') { // 检查返回状态是否成功
						// 赋值
						this.markersInfo = res.data.pois;
						this.markers = res.data.pois.map(poi => ({ // 将返回的POI转换为markers数组格式
							id: poi.id,
							latitude: poi.location.split(',')[1], // 经度纬度格式可能不同，根据实际情况调整
							longitude: poi.location.split(',')[0],
							// iconPath: '/static/marker.png', // 自定义标记图标路径，如果没有可以不设置或使用默认图标
							// width: 50, // 标记宽度，可根据需要调整
							// height: 50, // 标记高度，可根据需要调整
							label: {
								content: poi.name
							},
							/* callout: { // 弹出框配置，可根据需要调整或删除此项以不显示弹出框
							  content: poi.name, // 弹出框内容，可以是名称、地址等
							  display: 'ALWAYS' // 弹出框显示方式，'ALWAYS'为始终显示，'BYCLICK'为点击时显示，'BYDISTANCE'为距离一定范围内显示，具体根据需求设置或删除此项以不显示弹出框内容。注意：支付宝小程序不支持'BYDISTANCE'。
							} */
						}));
						// console.log('搜索成功', res.data); 
			        } else {
			          console.error('搜索失败', res.data); // 处理错误情况
			        }
			      },
			      fail: (err) => {
			        console.error('请求失败', err); // 处理请求失败情况
			      }
			    });
			  },
				
			/**
			 * 跳转-其它非tab菜单
			 * */
			toNavigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			
			/**
			 * 拨打电话-函数
			 * */
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			}
		}
	}
</script>

<!-- 当前页面css -->
<style lang="scss" scoped>
	page{
		background: #f8f8f8;
	}
	.homeDoms {
		height: 100vh;
		.popup-content {
			padding: 30upx;
		}
		.flexDom{
			display: flex;
		}
		.flexOne {
			flex: 1;
		}
		.alignItems {
			align-items: center;
		}
		.fontSize12 {
			font-size: 24upx;
		}
		.fontSize18 {
			font-size: 36upx;
		}
		.fontWeight {
			font-weight: bold;
		}
		.colorWhite{
			color: #FFFFFF;
		}
		.color666{
			color: #666666;
		}
		.color999{
			color: #999999;
		}
		.textAlign{
			text-align: right;
		}
		.textRight {
			text-align: right;
		}
		.mainColor{
			color: #7c89d9;
		}
		.bordrBottom666{
			border-bottom: 1px solid #666666;
		}
		.paddingBottom20{
			padding-bottom: 20upx;
		}
		.paddingBottom30{
			padding-bottom: 30upx;
		}
		.marginBottom20 {
			margin-bottom: 20upx;
		}
		.marginBottom30 {
			margin-bottom: 30upx;
		}
		.marginRight10 {
			margin-right: 10upx;
		}
		.marginRight20 {
			margin-right: 20upx;
		}
		.adDoms {
			background: #FFFFFF;
			margin-bottom: 40upx;
			border-radius: 20upx;
			image {
				width: 100%;
				border-radius: 20upx;
			}
			.adTexts {
				padding: 20upx 20upx 30upx;
			}
		}
		.xmBtton {
			display: inline-block;
			background: #7c89d9;
			font-size: 30upx;
			color: #FFFFFF;
			padding: 15upx 40upx;
			border-radius: 40upx;
		}
		.listDoms {
			background: #FFFFFF;
			border-radius: 20upx;
			padding: 30upx 20upx;
			.xmDoms {
				width: 180upx;
			}
			.xmTitle {
				font-size: 36upx;
				font-weight: bold;
				padding: 15upx 40upx 15upx 0;
				border-radius: 0 40upx 40upx 0;
				margin-right: 20upx;
			}
			.mainBg {
				display: inline-block;
				background: #7c89d9;
				padding: 10upx;
				font-size: 24upx;
				border-radius: 15upx;
			}
		}
	}
</style>
